<template>
  <div class="userList">
    基础管理 -> 用户管理
    <div class="search contentDiv">
      <Form
        ref="searchForm"
        :model="searchData"
        :label-width="80"
        inline>
        <FormItem
          label="用户名称"
          prop="nameSearch">
          <Input
            v-model="searchData.nameSearch"
            type="text"
            placeholder="请输入用户名称"/>
        </FormItem>
        <FormItem
          label="创建时间"
          prop="createTime">
          <DatePicker
            v-model="searchData.upTime"
            type="daterange"
            placeholder="请选择时间范围"
            style="width: 200px"></DatePicker>
        </FormItem>
        <!-- <FormItem> -->
        <div style="display: flex; justify-content: end; float: right;">
          <Button
            type="primary"
            style="margin-right: 10px"
            v-if="viewAccess('user:add')"
            @click="searchUserList">搜索</Button>
          <Button @click="resetSearch">重置</Button>
        </div>
        <!-- </FormItem> -->
      </Form>
    </div>
    <div class="dataList contentDiv">
      <Table
        :loading="loading"
        :columns="columns"
        :data="userList"
        :no-data-text="loading?'':'暂无数据'"
        disabled-hover
        border>
        <template
          slot-scope="{ row }"
          slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="addUser(row)">新增</Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="editUser(row)">编辑</Button>
          <Button
            type="error"
            size="small"
            @click="delUser(row)">删除</Button>
        </template>
      </Table>
      <Page
        :current="curPage"
        :total="totalPage"
        :page-size="pageSize"
        style="margin-top: 20px"
        @on-change="pageChange" />
    </div>
  </div>
</template>

<script>
import getUserListMixin from '@/mixins/userList'
import demoDetail from '@/components/demoDetail.vue'
import { hasOneOf } from '@/libs/tools'
export default {
  components: {
    demoDetail
  },
  mixins: [getUserListMixin],
  data () {
    return {
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 70,
          align: 'center'
        },
        {
          title: '用户名称',
          key: 'name'
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200
          // align: 'center'
        }
      ]
    }
  },
  mounted () {
    this.getList()
  },
  computed: {
    access () {
      return this.$store.state.user.access
    },
    viewAccess () {
      return(code) => {
        //提前定义所有按钮权限列表   例如user:add ['admin']
        //let accessList = getAccessByCode('user:add')
        console.log(code)
        return hasOneOf(['admin', 'user'], this.access)
      }
    }
  },
  methods: {
    addUser (row) {
      console.log(row)
      this.$Message.success('该功能暂不支持')
    },
    editUser (row) {
      console.log(row)
      this.$Message.success('该功能暂不支持')
    },
    delUser (row) {
      console.log(row)
      this.$Message.success('该功能暂不支持')
    }
  }
}
</script>

<style lang="less" scoped>
  .userList {
    .search {
      .ivu-form-item {
        margin-bottom: 0;
      }
      margin-bottom: 20px;
    }
  }
</style>
